<template>
  <view>
    <view v-if="type == 1">
      <!-- 积分 -->
      <view class="reward-box" v-if="isShowReceived">
        <view class="spotlight"></view>
        <view class="reward-content">
          <view class="reward-title">{{ title }}</view>
          <view class="reward-main">
            <view
              class="reward-content-box"
              :style="{
                background: `linear-gradient(to bottom, #F4F5F7, ${t(
                  'color1'
                )})`,
              }"
            >
              <view class="reward-content-title">{{ desc }}</view>
              <view class="reward-content-tips">
                {{ t("积分") }}可用于兑换商品
              </view>
              <view class="">
                <image
                  class="reward-img"
                  :src="pre_url + '/static/images/jinbi.png'"
                  mode=""
                ></image>
              </view>
            </view>
          </view>
          <view
            class="reward-btn"
            :style="{
              background: `linear-gradient(to bottom, ${t('color1')},#F4F5F7 )`,
            }"
            @click="handleReceive"
          >
            {{ btnText }}
          </view>
          <view @click.stop="closeReceive">
            <!-- :src="static_url + '/static/img/pop-close.png'"-->
            <image class="reward-close" :src="closeIcon"></image>
          </view>
        </view>
      </view>
    </view>

    <view v-if="type == 2">
      <view class="reward-box" v-if="isShowReceived">
        <view class="spotlight"></view>
        <view class="reward-content">
          <view class="reward-title">{{ title }}</view>
          <view class="reward-main">
            <view
              class="reward-content-box"
              :style="{
                background: `linear-gradient(to bottom, #F4F5F7, ${t(
                  'color1'
                )})`,
              }"
            >
              <view class="reward-content-title">{{ desc }}</view>
              <view class="reward-content-tips">
                {{ t("积分") }}可用于兑换商品
              </view>
              <view class="">
                <image
                  class="reward-img"
                  :src="pre_url + '/static/images/jinbi.png'"
                  mode=""
                ></image>
              </view>
            </view>
          </view>
          <view
            class="reward-btn"
            :style="{
              background: `linear-gradient(to bottom, ${t('color1')},#F4F5F7 )`,
            }"
            @click="handleReceive"
          >
            {{ btnText }}
          </view>
          <view @click.stop="closeReceive">
            <image class="reward-close" :src="closeIcon"></image>
          </view>
        </view>
      </view>
    </view>

    <view v-if="type == 3">
      <!-- 直播推送 -->
      <view v-if="isShowNotif" class="live-box">
        <view class="live-content">
          <view
            class="live-body-bg"
            v-if="bg_pic"
            @click="handleEnter"
            :style="{ backgroundImage: 'url(' + bg_pic + ')' }"
          >
          </view>
          <view class="live-body" @click="handleEnter" v-else>
            <view class="live-title">{{ title }}</view>
            <view class="live-info">
              <view class="live-desc">{{ desc }}</view>
              <view class="live-time">{{ time }}</view>
            </view>
            <view class="live-btn" @click="handleEnter">立即进入</view>
          </view>
          <view class="live-close" @click.stop="closeReceive">
            <image class="close-icon" :src="closeIcon"></image>
          </view>
        </view>
      </view>
    </view>

    <view v-if="type == 4">
      <!-- v-if="isguanggao || isguanggaovideo" -->
      <dp-guanggao
        v-if="guanggao_float_type == 1"
        :guanggaopic="guanggaopic"
        :guanggaourl="guanggaourl"
        :guanggaovideo="guanggaovideo"
        :closeTime="closeTime"
        :isguanggaovideoauto="isguanggaovideoauto"
        :isguanggaovideo="isguanggaovideo"
        :isguanggao="isguanggao"
        :closeIcon="closeIcon"
        :guanggao_is_full_screen="guanggao_is_full_screen"
        :guanggao_is_over_tabbar="guanggao_is_over_tabbar"
        :guanggao_full_screen_second="guanggao_full_screen_second"
        @closeReceive="closeReceive"
      ></dp-guanggao>

      <view v-else>
        <view class="pt4">
          <view class="pt4-content" @click="handleEnterPt4">
            <image
              class="pt4-img"
              :src="guanggaopic"
              :style="{ bottom: pt4bottom + 'px' }"
              @load="handleImageLoad"
            ></image>
            <view
              class="pt4-time"
              :style="{ bottom: pt4tbottom + 'px' }"
              v-if="pt4imgLoaded"
              >{{ count }}</view
            >
          </view>
          <view
            class="pt4-close"
            @click.stop="closeReceive"
            :style="{ bottom: pt4ibottom + 'px' }"
          >
            <image class="close-icon" :src="closeIcon"></image>
          </view>
        </view>
      </view>
    </view>

    <view class="coupon-box" v-if="type == 5">
      <view class="coupon-content">
        <view class="coupon-body" :style="{ background: t('color1') }">
          <view class="coupon-title" :style="{ background: t('color2') }">{{
            home_pop_title
          }}</view>
          <view class="coupon-info">
            <view class="coupon-info-title"> 恭喜获得 </view>
            <view class="coupon-info-num">
              {{ home_pop_coupon_num }}张优惠券
            </view>
          </view>
          <view class="coupon-main" :style="{ background: t('color2') }">
            <view class="coupon-main-box">
              <view class="coupon-main-box-title">
                <text class="coupon-title-text" :style="{ color: t('color1') }"
                  >通用卡券</text
                >
              </view>
              <view class="coupon-bx-content">
                <image
                  class="coupon-bx"
                  src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250508/15b7bba781f0b983d855e414e2208653.png"
                  mode=""
                ></image>
                <view class="" :style="{ color: t('color1') }">
                  <view class="bx-text">
                    共计<text class="coupon-money">{{
                      home_pop_coupon_money
                    }}</text
                    >元起
                  </view>
                  <view class="bx-btn" :style="{ background: t('color2') }">
                    商城通用
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view
            class="coupon-btn"
            :style="{ background: t('color2') }"
            @click="toCoupon"
            >立即查看</view
          >
        </view>

        <!-- src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250430/4c8d735bac0aefdc5c045dbaefeaac44.png" -->
        <view class="coupon-close" @click.stop="closeReceive">
          <image class="close-icon" :src="closeIcon"></image>
        </view>
      </view>
    </view>

    <view v-if="type == 6">
      <view class="pt6">
        <view class="pt6-content" @click="handleEnterPt6">
          <image
            class="pt6-img"
            src="https://pic.hedashepin.com/upload/3/20250610/451c70b00e166c25286d2dc1dd743d12.png"
            mode="widthFix"
            @load="handleImageLoad6"
          ></image>
          <view class="price-card" v-if="pt6imgLoaded">
            <view class="left-section">
              <text class="price">
                <text class="currency">¥</text>{{ desc }}
              </text>
            </view>
            <view class="right-section">
              <text class="title">{{ title }}</text>
              <text class="subtitle">返还余额</text>
            </view>
          </view>
        </view>
        <view class="pt6-close" @click.stop="closeReceive">
          <image
            class="close-icon"
            src="https://pic.hedashepin.com/upload/3/20250529/cd84c271430cc30c332ce59bad53474c.png"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
var app = getApp();
export default {
  props: {},
  data() {
    return {
      static_url: app.globalData.static_url,
      pre_url: app.globalData.pre_url,
      type: 0,
      mtype: 0,
      btnText: "开心收下", // 初始文本
      isReceived: false, // 是否已领取
      isShowReceived: true,
      isShowNotif: true,
      isShowPoster: true,
      lindex: 0,
      title: "",
      desc: "",
      time: "",
      detailId: "",
      poster: "",
      toUrl: "",
      guanggaopic: "",
      guanggaourl: "",
      isguanggao: 0,
      guanggaovideo: "",
      isguanggaovideo: 0,
      closeTime: 0,
      isguanggaovideoauto: 0,
      home_pop_title: "",
      home_pop_coupon_num: "",
      home_pop_coupon_money: "",
      home_pop_guanggao_id: 0,
      guanggao_is_full_screen: 0,
      guanggao_is_over_tabbar: 0,
      guanggao_full_screen_second: 0,
      guanggao_float_type: 1,
      guanggao_end_times: {},
      poplist: [],
      bg_pic: "",
      closeIcon: "",
      pt4tbottom: 122,
      pt4bottom: 70,
      pt4ibottom: 170,
      safebottom: 20, //底部安全区
      count: "00:00:00",
      totalSeconds: 0, // 总秒数
      timer: null, // 定时器
      pt4imgLoaded: false,
      pt6imgLoaded: false,
    };
  },

  mounted() {
    // #ifndef H5 || APP-PLUS || MP-ALIPAY
    const systemInfo = uni.getSystemInfoSync();
    const safeAreaInsets = systemInfo.safeAreaInsets;
    this.safebottom = safeAreaInsets.bottom;
    this.pt4bottom = this.pt4bottom + this.safebottom;
    this.pt4ibottom = this.pt4ibottom + this.safebottom;
    this.pt4tbottom = this.pt4tbottom + this.safebottom;
    // #endif
    setTimeout(() => {
      this.getdata();
    }, 1000);
  },
  beforeDestroy() {
    this.clearTimer();
  },
  methods: {
    getdata() {
      let that = this;
      app.get("index/getPopupList", {}, (res) => {
        if (res.code == 200) {
          if (res.res.length > 0) {
            that.poplist = res.res;
            that.checkoutList();
          }
        }
      });
    },

    coverInfo(item) {
      this.mtype = item.home_pop_type;
      this.type = item.home_pop_sub_type;
      this.closeIcon = item.guanggao_cancel_pic;
      this.home_pop_guanggao_id = item.home_pop_guanggao_id;
      this.addPops();
      if (this.type == 1) {
        this.desc = item.home_pop_content;
        this.title = item.home_pop_title;
      } else if (this.type == 2) {
        this.desc = item.home_pop_content;
        this.title = item.home_pop_title;
      } else if (this.type == 3) {
        this.title = item.home_pop_title;
        this.desc = item.home_pop_content;
        this.time = item.home_pop_time;
        this.toUrl = item.home_pop_link;
        this.bg_pic = item.home_pop_banner;
      } else if (this.type == 4) {
        this.guanggaopic = item.guanggaopic;
        this.guanggaourl = item.guanggaourl;
        this.guanggaovideo = item.guanggaovideo;
        this.isguanggaovideoauto = item.isguanggaovideoauto;
        this.isguanggaovideo = item.isguanggaovideo;
        this.isguanggao = item.isguanggao;
        // this.home_pop_guanggao_id = item.home_pop_guanggao_id;
        this.guanggao_is_full_screen = item.guanggao_is_full_screen;
        this.guanggao_is_over_tabbar = item.guanggao_is_over_tabbar;
        this.guanggao_full_screen_second = item.guanggao_full_screen_second;
        this.guanggao_float_type = item.guanggao_float_type;
        this.guanggao_end_times = item.guanggao_end_times;
        if (this.guanggao_end_times) {
          this.count =
            this.guanggao_end_times.hours +
            ":" +
            this.guanggao_end_times.minutes +
            ":" +
            this.guanggao_end_times.seconds;
        }
        this.initCountdown();
      } else if (this.type == 5) {
        this.home_pop_title = item.home_pop_title;
        this.home_pop_coupon_num = item.home_pop_coupon_num;
        this.home_pop_coupon_money = item.home_pop_coupon_money;
      } else if (this.type == 6) {
        this.title = item.home_pop_title;
        this.desc = item.home_pop_content;
      }
      console.log("设置获取弹窗数据", this.type, this.lindex);
    },

    handleReceive() {
      if (!this.isReceived) {
        this.btnText = "已到账";
        this.isReceived = true;
      }
      app.get("index/putPopupJifen", {}, (res) => {
        if (res.code == 200) {
          app.error("领取成功");
          setTimeout(() => {
            this.closeReceive();
          }, 1000);
        }
      });
    },

    closeReceive() {
      // this.isShowReceived = false;
      this.type = 0;
      setTimeout(() => {
        this.checkoutList();
      }, 300);
    },

    handleEnter() {
      app.goto(this.toUrl);
      this.closeReceive();
    },

    handleEnterPt4() {
      app.goto(this.guanggaourl);
      this.closeReceive();
    },

    handleEnterPt6() {
      app.goto("/pages/shop/classify");
      this.closeReceive();
    },

    toCoupon() {
      app.goto("/pagesExt/coupon/mycoupon");
      this.closeReceive();
    },

    checkoutList() {
      if (this.lindex < this.poplist.length) {
        this.coverInfo(this.poplist[this.lindex]);
        this.lindex++;
      }
    },

    addPops() {
      app.get(
        "index/putPopupLimit",
        {
          type: this.mtype,
          guanggao_id: this.home_pop_guanggao_id,
        },
        (res) => {}
      );
    },

    handleImageLoad(e) {
      this.pt4imgLoaded = true;
    },

    handleImageLoad6(e) {
      this.pt6imgLoaded = true;
    },

    // 初始化倒计时
    initCountdown() {
      // 计算总秒数
      this.totalSeconds =
        this.guanggao_end_times.hours * 3600 +
        this.guanggao_end_times.minutes * 60 +
        this.guanggao_end_times.seconds;
      // 立即显示一次
      this.updateCountdown();
      // 开始倒计时
      this.startTimer();
    },

    // 开始计时器
    startTimer() {
      this.clearTimer();
      this.timer = setInterval(() => {
        if (this.totalSeconds <= 0) {
          this.clearTimer();
          this.count = "00:00:00";
          this.$emit("timeup"); // 触发时间到事件
          return;
        }
        this.totalSeconds--;
        this.updateCountdown();
      }, 1000);
    },

    // 更新倒计时显示
    updateCountdown() {
      const hours = Math.floor(this.totalSeconds / 3600);
      const minutes = Math.floor((this.totalSeconds % 3600) / 60);
      const seconds = this.totalSeconds % 60;

      // 格式化为两位数
      this.count = [
        hours.toString().padStart(2, "0"),
        minutes.toString().padStart(2, "0"),
        seconds.toString().padStart(2, "0"),
      ].join(":");
    },

    // 清除计时器
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },

    // 重置倒计时（可选）
    resetCountdown(newEndTime) {
      this.endTime = newEndTime || this.endTime;
      this.initCountdown();
    },
  },
  watch: {
    // 监听props变化（可选）
    endTime: {
      handler(newVal) {
        this.resetCountdown(newVal);
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.reward-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999999;

  .reward-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 12rpx;
    padding: 30rpx;
    text-align: center;
    width: 80%;
    max-width: 600rpx;

    .reward-title {
      font-size: 36rpx;
      margin-bottom: 10rpx;
    }

    .reward-main {
      border: 1px solid rgba(255, 253, 248, 1);
      border-radius: 30rpx;
      padding: 10rpx;

      .reward-content-box {
        border-radius: 30rpx;
        background: linear-gradient(
          to bottom,
          rgba(199, 224, 221, 1),
          rgba(87, 150, 149, 1)
        );
        padding: 40rpx 0;
      }

      .reward-content-title {
        font-size: 48rpx;
        font-weight: bold;
      }

      .reward-content-tips {
        font-size: 28rpx;
        font-weight: bold;
      }

      .reward-img {
        width: 280rpx;
        height: 220rpx;
      }
    }

    .reward-btn {
      border-radius: 20rpx;
      margin: 10rpx auto;
      background: linear-gradient(
        to bottom,
        rgba(87, 150, 149, 1),
        rgba(199, 224, 221, 1)
      );
      font-weight: bold;
      padding: 20rpx;
      width: 60%;
      text-align: center;
    }

    .reward-close {
      width: 70rpx;
      height: 70rpx;
    }
  }
}

.live-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999999;

  .live-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    max-width: 600rpx;
    text-align: center;
    .live-body-bg {
      border-radius: 12rpx;
      padding: 30rpx;
      text-align: center;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 546rpx;
      height: 546rpx;
    }
    .live-body {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 30rpx;
      text-align: center;
      width: 520rpx;
      .live-title {
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
      }

      .live-info {
        margin: 20rpx 0;

        .live-time {
          font-size: 32rpx;
          color: #333;
          margin-bottom: 30rpx;
        }

        .live-desc {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 30rpx;
        }

        .live-subtitle {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 30rpx;
        }

        .live-img {
          width: 100%;
          height: 300rpx;
          border-radius: 8rpx;
        }
      }

      .live-btn {
        width: 60%;
        margin: 30rpx auto;
        padding: 20rpx;
        border-radius: 40rpx;
        background-color: rgba(255, 255, 255, 1);
        color: rgba(144, 96, 222, 1);
        font-size: 32rpx;
        text-align: center;
        border: 1rpx solid rgba(187, 187, 187, 1);
      }
    }

    .live-close {
      margin-top: 30rpx;

      .close-icon {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
}

.p-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999999;

  .p-body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw;
    height: 60vh;
    text-align: center;

    .p-img {
      width: 100%;
      height: 100%;
      border-radius: 18rpx;
    }

    .p-close {
      .close-icon {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
}

.coupon-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);

  .coupon-content {
    width: 70%;
    max-width: 600rpx;
    text-align: center;
    position: relative;

    .coupon-body {
      border-radius: 12rpx;
      padding: 60rpx 30rpx 30rpx;
      text-align: center;
      position: relative;
      overflow: visible;

      .coupon-title {
        font-size: 32rpx;
        position: absolute;
        font-weight: 700;
        top: 0rpx;
        left: 50%;
        transform: translateX(-50%);
        padding: 10rpx 50rpx;
        color: #fff;
        clip-path: polygon(5% 0%, 95% 0%, 90% 100%, 10% 100%);
        z-index: 2;
      }

      .coupon-info {
        margin: 20rpx 0;

        .coupon-info-title {
          color: #fff;
          margin-top: 10rpx;
          font-size: 40rpx;
        }

        .coupon-info-num {
          color: #fff;
          margin-top: 10rpx;
          font-size: 48rpx;
        }
      }

      .coupon-main {
        position: relative;
        margin-top: 20rpx;
        border-radius: 36rpx;
        min-height: 200rpx;

        .coupon-main-box {
          background-color: #fff;
          width: 100%;
          padding: 40rpx 20rpx 20rpx;
          border-radius: 0 0 30rpx 30rpx;

          .coupon-main-box-title {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20rpx;

            .coupon-title-text {
              font-size: 32rpx;
              font-weight: 700;
              padding: 0 20rpx;
            }

            &::before,
            &::after {
              content: "";
              width: 60rpx;
              height: 1px;
              background-color: rgb(185, 105, 231);
            }
          }

          .coupon-bx-content {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .coupon-bx {
              width: 160rpx;
              height: 160rpx;
            }

            .coupon-money {
              color: #e7242f;
              font-size: 48rpx;
            }

            .bx-text {
              font-weight: bold;
            }

            .bx-btn {
              border-radius: 10rpx;
              padding: 0 10rpx;
              color: #fff;
              margin-top: 10rpx;
            }
          }
        }
      }

      .coupon-btn {
        width: 60%;
        margin: 30rpx auto 0;
        padding: 20rpx;
        border-radius: 40rpx;
        color: #fff;
        font-size: 32rpx;
        text-align: center;
        position: relative;
        z-index: 1;
      }
    }

    .coupon-close {
      margin-top: 30rpx;

      .close-icon {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
}

.pt4 {
  width: 100%;
  height: 100%;
  // position: fixed;
  // top: 0;
  // left: 0;
  z-index: 9999999;
  .pt4-content {
    .pt4-img {
      width: 100%;
      height: 120px;
      border-radius: 10px;
      position: fixed;
      bottom: 70px;
      z-index: 9999999;
    }
    .pt4-time {
      position: fixed;
      bottom: 122px;
      right: 42px;
      color: #fffc00;
      font-style: italic;
      z-index: 9999999;
      font-size: 20px;
      padding: 0 3px;
    }
  }
  .pt4-close {
    position: fixed;
    z-index: 9999999;
    bottom: 170px;
    right: 10px;
    .close-icon {
      width: 70rpx;
      height: 70rpx;
    }
  }
}

.pt6 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 40rpx;
  background-color: rgba(0, 0, 0, 0.5);
  .pt6-content {
    position: relative;
    width: 80vw;
    // height: 386px;
    max-height: 66vh;
    .pt6-img {
      width: 100%;
      height: 100%;
      // height: 120px;
      border-radius: 10px;
      // position: fixed;
      // bottom: 70px;
      // z-index: 9999999;
    }

    .price-card {
      position: absolute;
      top: 170px;
      left: 50%;
      transform: translateX(-50%);
      width: 80%;
      height: 150rpx;
      border-radius: 24rpx;
      overflow: hidden;
      display: flex;
      align-items: center;

      .left-section {
        position: relative;
        width: 220rpx;
        height: 100%;
        background: linear-gradient(135deg, #f1def4 0%, #f0e9f9 100%);
        display: flex;
        align-items: center;
        justify-content: center;

        // 使用path创建更平滑的弧线
        // clip-path: path("M0,0 L240,0 Q270,60 240,120 L0,120 Z");

        &::after {
          content: "";
          position: absolute;
          right: -20rpx;
          top: 0;
          width: 40rpx;
          height: 100%;
          background: inherit;
          clip-path: ellipse(50% 50% at 50% 50%);
          transform: scaleX(0.7);
          background: #f0e9f9;
        }

        .price {
          font-size: 92rpx;
          font-weight: bold;
          color: #9733b9;
          margin-bottom: 10rpx;
          margin-left: 10rpx;
          .currency {
            font-size: 46rpx;
            margin-right: 8rpx;
          }
        }
      }

      .right-section {
        flex: 1;
        height: 100%;
        background: linear-gradient(135deg, #9d3ec3 0%, #871596 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;

        .title {
          font-size: 28rpx;
          color: white;
          font-weight: 500;
          margin-bottom: 8rpx;
          text-align: center;
        }

        .subtitle {
          font-size: 28rpx;
          color: rgba(255, 255, 255, 0.9);
          // font-weight: 400;
          text-align: center;
        }
      }
    }
  }
  .pt6-close {
    // position: fixed;
    // z-index: 9999999;
    // bottom: 170px;
    // right: 10px;
    .close-icon {
      width: 70rpx;
      height: 70rpx;
    }
  }
}
</style>
